<template>
    <div id="stepThree">
        <v-container>
<v-jsoneditor v-model="full_map" :options="options" :plus="false" height="400px" @error="onError">
    </v-jsoneditor>
            </v-container>
    </div>
</template>

<script>
import VJsoneditor from 'v-jsoneditor'
import { mapGetters } from 'vuex'
import {validationMixin} from 'vuelidate'
import {required} from 'vuelidate/lib/validators'
export default {
    components: {VJsoneditor},
    props: ['currentStep'],
    data(){
        return {
        d: 'test' }
    },
    computed:{
    ...mapGetters(
            'deployment', ['full_map']
         ),
    },
    mounted() {
//        this.$emit('can-continue', {value: true})
    },
    methods: {
        addVisa() {
            this.dockers.push({
                name:'',
                ports:[{
                    containerPort: '',
                    hostPort: '',
                }],
                image: '',
                imagePullPolicy: "IfNotPresent",
            })
            this.$emit('can-continue', {value: true});
            console.log(JSON.stringify(this.dockers))
        },
        deleteVisa(id){
            this.dockers.splice(id,1);
//            console.log(JSON.stringify(this.dockers))
        }
    },
    watch: {
       dockers: {
           handler (newTitle) {
               this.create_dockers(newTitle)
           }, deep: true,
       }
    },
}
</script>

<style>
    #steptwo .container {
        min-height: 360px;
        max-height: 360px;
        overflow-y: scroll;
    }
</style>